<template>
  <div class="full flex-col center-center" style="background-color: white">
    <div style="text-align: center;font-weight: bold;margin: 8px; font-size: 20px;">{{ data.trainName }}</div>
    <VueQr :text="data.trainId" :size="400"></VueQr>
  </div>
</template>

<script setup lang="ts">
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import {useUserStore} from "@/store/user";
import {reactive, ref} from "vue";
import {FormInstance} from "element-plus";

const userStore = useUserStore()


const emit = defineEmits(["close"])
const form = ref<FormInstance>();
const props = defineProps({
  trainId: {
    type: String,
  },
  trainName: {
    type: String,
  }
});
const data = reactive({
      trainName: '',
      trainId: ''
    }
);
data.trainId = props.trainId || '';
data.trainName = props.trainName || '';
console.log('data.trainId', data.trainId)
</script>

<style scoped>

</style>